import {optionDesc} from "@/package/tools/common";

const data = {
  nameList: ["广东", "湖南", "江西", "广西", "浙江", "福建", "湖北", "重庆", "云南", "河南"],
  blList: [100, 99, 98, 97, 96, 95, 94, 93, 92, 91]
}

export default {
  name: '自定义图表',
  icon: '/img/chart/map2.png',
  type: '自定义',
  cptKey: 'map02',
  width: 600,
  height: 400,
  dynamic: true,
  options: {
    cptDataForm: {
      dataText: JSON.stringify(data),
      dataSource: 1,
      pollTime: 0
    },
    attribute: {
      optionFn: 'function getOption(echarts, data) {\n' +
        '    var nameList = data.nameList;// 教职工岗位\n' +
        '   let blList = data.blList;// 岗位对应人数\n' +
        '   const option = {\n' +
        '   dataZoom: [{\n' +
        '      type: \'slider\',\n' +
        '      //backgroundColor: \'rgba(245,245,245)\',\n' +
        '      backgroundColor: \'transparent\',\n' +
        '      brushSelect: false,\n' +
        '      width: 7,\n' +
        '      show: true, //flase直接隐藏图形\n' +
        '      yAxisIndex: [0],\n' +
        '      //left: \'center\', //滚动条靠左侧的百分比\n' +
        '      //bottom: 13,\n' +
        '      startValue: 0, //滚动条的起始位置\n' +
        '      endValue: 6, //滚动条的截止位置（按比例分割你的柱状图x轴长度）\n' +
        '\n' +
        '      handleStyle: {\n' +
        '         color: \'#E8E8E8\',\n' +
        '         borderColor: \'#E8E8E8\',\n' +
        '      },\n' +
        '      fillerColor: \'#E8E8E8\',\n' +
        '      borderColor: \'transparent\',\n' +
        '      showDetail: false,\n' +
        '\n' +
        '      dataBackground: {\n' +
        '         areaStyle: {\n' +
        '            opacity: 0\n' +
        '         },\n' +
        '         lineStyle: {\n' +
        '            color: \'transparent\'\n' +
        '         },\n' +
        '      },\n' +
        '\n' +
        '   }],\n' +
        '   legend: {\n' +
        '      show: false,\n' +
        '   },\n' +
        '   grid: {\n' +
        '      left: "15%",\n' +
        '      right: "20%",\n' +
        '      bottom: "5%",\n' +
        '      top: "8%",\n' +
        '      containLabel: true,\n' +
        '   },\n' +
        '   xAxis: [\n' +
        '      {\n' +
        '         splitLine: {\n' +
        '            show: false,\n' +
        '         },\n' +
        '         type: "value",\n' +
        '         show: false,\n' +
        '      },\n' +
        '   ],\n' +
        '   yAxis: [\n' +
        '      {\n' +
        '         splitLine: {\n' +
        '            show: false,\n' +
        '         },\n' +
        '         axisLine: {//y轴\n' +
        '            show: false,\n' +
        '         },\n' +
        '         type: "category",\n' +
        '         axisTick: {\n' +
        '            show: false,\n' +
        '         },\n' +
        '         inverse: true, // 倒序\n' +
        '         boundaryGap: false, // 留白政策\n' +
        '         data: nameList,\n' +
        '         axisLabel: {\n' +
        '            color: "#FFF",\n' +
        '            align: \'left\',\n' +
        '            padding: [-10, 0, 0, -180],\n' +
        '            verticalAlign: "top",\n' +
        '            formatter: (value, index) => {\n' +
        '               let i = nameList.indexOf(value);\n' +
        '               if (i == 0) {\n' +
        '                  return [`{lg1|${i + 1}} ` + "{title|" + value + "} "].join("\\n");\n' +
        '               } else if (i == 1) {\n' +
        '                  return [`{lg2|${i + 1}} ` + "{title|" + value + "} "].join("\\n");\n' +
        '               } else if (i == 2) {\n' +
        '                  return [`{lg3|${i + 1}} ` + "{title|" + value + "} "].join("\\n");\n' +
        '               } else {\n' +
        '                  return [`{lg|${i + 1}} ` + "{title|" + value + "} "].join("\\n");\n' +
        '               }\n' +
        '            },\n' +
        '            rich: {\n' +
        '               lg1: {\n' +
        '                  backgroundColor: "rgba(240, 106, 57, 0.1)",\n' +
        '                  color: \'rgba(240, 106, 57, 1)\',\n' +
        '                  borderRadius: [5,5,0,0],\n' +
        '                  padding: 5,\n' +
        '                  align: "center",\n' +
        '                  width: 32,\n' +
        '                  height: 32,\n' +
        '                  lineHeight: 32,\n' +
        '                  fontSize: 19,\n' +
        '                  fontFamily: \'Source Han Sans CN-Regular\',\n' +
        '               },\n' +
        '               lg2: {\n' +
        '                  backgroundColor: "rgba(255, 176, 38, 0.1)",\n' +
        '                  color: \'rgba(255, 176, 38, 1)\',\n' +
        '                  borderRadius: 5,\n' +
        '                  padding: 5,\n' +
        '                  align: "center",\n' +
        '                  width: 32,\n' +
        '                  height: 32,\n' +
        '                  lineHeight: 32,\n' +
        '                  fontSize: 19,\n' +
        '                  fontFamily: \'Source Han Sans CN-Regular\',\n' +
        '               },\n' +
        '               lg3: {\n' +
        '                  backgroundColor: "rgba(51, 207, 201, 0.1)",\n' +
        '                  color: \'rgba(51, 207, 201, 1)\',\n' +
        '                  borderRadius: 5,\n' +
        '                  padding: 5,\n' +
        '                  align: "center",\n' +
        '                  width: 32,\n' +
        '                  height: 32,\n' +
        '                  lineHeight: 32,\n' +
        '                  fontSize: 19,\n' +
        '                  fontFamily: \'Source Han Sans CN-Regular\',\n' +
        '               },\n' +
        '               lg: {\n' +
        '                  backgroundColor: "rgba(57, 126, 240, 0.1)",\n' +
        '                  color: \'rgba(57, 126, 240, 1)\',\n' +
        '                  borderRadius: 5,\n' +
        '                  padding: 5,\n' +
        '                  align: "center",\n' +
        '                  width: 32,\n' +
        '                  height: 32,\n' +
        '                  lineHeight: 32,\n' +
        '                  fontSize: 19,\n' +
        '                  fontFamily: \'Source Han Sans CN-Regular\',\n' +
        '               },\n' +
        '               title: {\n' +
        '                  color: \'#FFF\',\n' +
        '                  align: "right",\n' +
        '                  fontSize: 18,\n' +
        '                  fontFamily: \'Source Han Sans CN-Regular\',\n' +
        '                  padding: [0, 0, 0, 21],\n' +
        '               },\n' +
        '            },\n' +
        '         },\n' +
        '      },\n' +
        '   ],\n' +
        '   series: [\n' +
        '      {\n' +
        '         name: "人数",\n' +
        '         type: "bar",\n' +
        '         barWidth: 13, // 柱子宽度\n' +
        '         showBackground: true,\n' +
        '         backgroundStyle: {\n' +
        '            color: \'rgba(57, 126, 240, 0)\',\n' +
        '            borderColor: \'rgba(57, 126, 240, 0.04)\',\n' +
        '            borderWidth: 20\n' +
        '         },\n' +
        '         label: {\n' +
        '            show: true,\n' +
        '            formatter: \'{c}人\',\n' +
        '            color: "#FFF",\n' +
        '            fontFamily: "HarmonyOS Sans-Medium",\n' +
        '            fontSize: 14,\n' +
        '            position: \'right\'\n' +
        '         },\n' +
        '         itemStyle: {\n' +
        '\n' +
        '            barBorderRadius: [0, 3, 3, 0], // 圆角（左上、右上、右下、左下）\n' +
        '            color: {\n' +
        '               x: 0,\n' +
        '               y: 1,\n' +
        '               x2: 1,\n' +
        '               y2: 0,\n' +
        '               colorStops: [{\n' +
        '                  offset: 0,\n' +
        '                  color: \'rgba(57, 126, 240, 1)\' // 0% 处的颜色\n' +
        '               }, {\n' +
        '                  offset: 1,\n' +
        '                  color: \'rgba(51, 207, 201, 1)\' // 100% 处的颜色\n' +
        '               }],\n' +
        '            },\n' +
        '         },\n' +
        '         data: blList,\n' +
        '      },\n' +
        '   ],\n' +
        '}\n' +
        'return option\n' +
        '}',
      optionDesc: optionDesc
    }
  }
}
